<template>
	<div class="page-container did">
		<el-card class="page-form-card">
			<div class="flex-1 h-[100vh]">
				<el-form ref="form" label-width="180px" :model="form" :rules="rules">
					<el-form-item label="推荐店铺分润比例(一级):" prop="push">
						<div class="flex items-center">
							<el-input v-model="form.push" class="!w-[200px]" placeholder="请输入直推奖励">
								<span slot="suffix">(%)</span>
							</el-input>
							<!-- <el-button class="ml-[12px] flex items-center" type="primary" @click="handleEdit('push', 0)">编辑 </el-button> -->
						</div>
					</el-form-item>
					<el-form-item label="推荐店铺分润比例(二级):" label-width="180px" prop="extrapolation">
						<div class="flex items-center">
							<el-input v-model="form.extrapolation" class="!w-[200px]" placeholder="请输入间推奖励">
								<span slot="suffix">(%)</span>
							</el-input>
							<!-- <el-button class="ml-[12px] flex items-center" type="primary" @click="handleEdit('extrapolation', 1)">编辑 </el-button> -->
						</div>
					</el-form-item>
					<el-form-item label="推荐会员充值分润比例(一级):" label-width="180px" prop="extrapolation">
						<div class="flex items-center">
							<el-input v-model="form.extrapolation" class="!w-[200px]" placeholder="请输入间推奖励">
								<span slot="suffix">(%)</span>
							</el-input>
							<!-- <el-button class="ml-[12px] flex items-center" type="primary" @click="handleEdit('extrapolation', 1)">编辑 </el-button> -->
						</div>
					</el-form-item>
					<el-form-item label="推荐会员充值分润比例(二级):" label-width="180px" prop="extrapolation">
						<div class="flex items-center">
							<el-input v-model="form.extrapolation" class="!w-[200px]" placeholder="请输入间推奖励">
								<span slot="suffix">(%)</span>
							</el-input>
							<!-- <el-button class="ml-[12px] flex items-center" type="primary" @click="handleEdit('extrapolation', 1)">编辑 </el-button> -->
						</div>
					</el-form-item>
				</el-form>
				<el-button class="w-[107px] !h-[40px] ml-[120px] mt-[50px]" type="primary" @click="submit">保存</el-button>
			</div>
		</el-card>
	</div>
</template>
<script>
export default {
	name: 'Dividend',
	data() {
		return {
			tab: ['分红配置'],
			tabActive: 0,
			rules: {
				push: [{ required: true, message: '请输入直推奖励', trigger: 'blur' }],
				extrapolation: [{ required: true, message: '请选择间推奖励', trigger: 'blur' }],
			},
			form: {
				push: null,
				extrapolation: null,
			},
			list: [],
		};
	},
	created() {
		this.getInfo();
	},
	methods: {
		getInfo() {
			this.$request.get('/system/dict/data/list?pageNum=1&pageSize=10&dictType=dividend').then((res) => {
				this.list = res.rows;
				this.form.push = res.rows[0].dictValue;
				this.form.extrapolation = res.rows[1].dictValue;
			});
		},
		handleEdit(key, type) {
			this.$refs['form'].validateField(key, (errorMessage) => {
				let valid = errorMessage === '';
				if (valid) {
					this.$request
						.put(`/system/dict/data`, {
							...this.list[type],
							dictValue: this.form[key],
						})
						.then(() => {
							this.$message.success('编辑成功');
						});
				}
			});
		},
		handleTab(index) {
			this.tabActive = index;
		},
	},
};
</script>

<style lang="scss" scoped>
.did {
	::v-deep .el-card__body {
		height: 100vh;
	}
	&__left {
		border: 1px solid #4c59c6;
		border-radius: 4px;
		&--item {
			cursor: pointer;
			height: 48px;
			color: #2c333f;
			font-size: 12px;
			text-align: center;
			line-height: 48px;
			font-family: Microsoft YaHei-Regular, Microsoft YaHei;
		}
		&--active {
			background: rgba(76, 89, 198, 0.2);
			color: #4c59c6;
			font-weight: bold;
		}
	}
	&__right {
		border-left: 1px solid #f3f4f7;
	}
}
::v-deep .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before{
	content: '' !important;
}
</style>
